<template>
  <div class="home">
    <div class="inp">
      <div class='inp-1'>
        <div class='img'>
          <img src="./shouye/inp_03.jpg" alt="">
        </div>
          <input type="text" placeholder="搜索菜谱、食材或菜单...">
      </div>
          <button>今日签到</button>
        </div>
        <swiper :options="swiperOption" class='chuang'>
          <swiper-slide v-for='(item,i) in arr' :key="i">
            <router-link :to="'/zhuanti/' +item.ID">
              <img :src="item.img_src">
        </router-link>
          </swiper-slide>
        </swiper>
        <div class='content'>
          <div class='s'>
            <div class='content-1'>
              <div class='img'><img src="./shouye/s1.jpg" alt=""></div>
                <div class='zi'>菜谱大全</div>
              </div>
              <div class='content-1'>
                <div class='img'><img src="./shouye/s2.jpg" alt=""></div>
                  <div class='zi'>食材大全</div>
                </div>
                <div class='content-1'>
                  <div class='img'><img src="./shouye/s3.jpg" alt=""></div>
                    <div class='zi'>专题</div>
                  </div>
                  <div class='content-1'>
                    <div class='img'><img src="./shouye/s4.jpg" alt=""></div>
                      <div class='zi'>菜单</div>
                    </div>
                    <div class='content-1'>
                      <div class='img'><img src="./shouye/s5.jpg" alt=""></div>
                        <div class='zi'>精选</div>
                      </div>
                    </div>
                    <div class='x'>
                      <div class='content-1'>
                        <div class='img'><img src="./shouye/s6.jpg" alt=""></div>
                          <div class='zi'>一周热门</div>
                        </div>
                        <div class='content-1'>
                          <div class='img'><img src="./shouye/s7.jpg" alt=""></div>
                            <div class='zi'>人气菜肴</div>
                          </div>
                          <div class='content-1'>
                            <div class='img'><img src="./shouye/s8.jpg" alt=""></div>
                              <div class='zi'>家常菜</div>
                            </div>
                            <div class='content-1'>
                              <div class='img'><img src="./shouye/s9.jpg" alt=""></div>
                                <div class='zi'>食疗养生</div>
                              </div>
                              <div class='content-1'>
                                <div class='img'><img src="./shouye/s10.jpg" alt=""></div>
                                  <div class='zi'>福利社</div>
                                </div>
                              </div>
                            </div>
                            <div class='lb'>
                              <div class='lb-1'>
                                <div class='left'>
                                  <img src="./shouye/ss1.jpg" alt="">
                              </div>
                                  <div class='right'>
                                    <div class='r-s'>
                                      <div class='s-l'>
                                        <img src="./shouye/ss2.jpg" alt="">
                                    </div>
                                        <div class='s-r'>
                                          <img src="./shouye/ss3.jpg" alt="">
                                    </div>
                                        </div>
                                        <div class='r-x'>
                                          <div class='s-l'>
                                            <img src="./shouye/ss4.jpg" alt="">
                                      </div>
                                            <div class='s-r'>
                                              <img src="./shouye/ss5.jpg" alt="">
                                        </div>
                                            </div>
                                          </div>
                                        </div>
                                        <div class='lb-1'>
                                          <div class='left'>
                                            <img src="./shouye/ss1.jpg" alt="">
                                        </div>
                                            <div class='right'>
                                              <div class='r-s'>
                                                <div class='s-l'>
                                                  <img src="./shouye/ss2.jpg" alt="">
                                              </div>
                                                  <div class='s-r'>
                                                    <img src="./shouye/ss3.jpg" alt="">
                                              </div>
                                                  </div>
                                                  <div class='r-x'>
                                                    <div class='s-l'>
                                                      <img src="./shouye/ss4.jpg" alt="">
                                                </div>
                                                      <div class='s-r'>
                                                        <img src="./shouye/ss5.jpg" alt="">
                                                   </div>
                                                      </div>
                                                    </div>
                                                  </div>
                                                </div>
                                                <router-link tag='div' class='list' v-for='(items,index) in banner' :key='index' :to="'/xiang/'+items.ID">

                                                  <!-- <div class='left' v-show='items.list_name==nothing'>
                                                  <img :src='items.imgarr' alt="">
                                                </div>
                                                  <div class='right'>
                                                    <div class='d'>{{items.sub_tit}}</div>
                                                    <p class='z'>{{items.list_name}}</p>
                                                    <div class='x'>
                                                      <div class='m'>{{items.menu}}</div>
                                                      <div class='dian'>...</div>
                                                    </div>
                                                  </div> -->

                                                  <div class='left' v-show="items.list_name!= 'nothing'">
                                                    <img :src='items.imgarr' alt="">
                                                </div>
                                                    <div class='right'>
                                                      <div class='d'>{{items.sub_tit}}</div>
                                                      <p class='z'>{{items.list_name}}</p>
                                                      <div class='x'>
                                                        <div class='m'>{{items.menu}}</div>
                                                        <div class='dian'>...</div>
                                                      </div>
                                                    </div>
                                                </router-link>
                                              </div>
</template>

 <script>
import axios from "axios";
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import VueScroller from "vue-scroller";
export default {
  data() {
    return {
      arr: [],
      banner: [],
      swiperOption: {
        autoplay: 1000,
        speed: 1000,
        loop: true
      }
    };
  },
  components: {
    swiper,
    swiperSlide
  },
  created() {
    axios.get("api/menu/silderPage").then(res => {
      this.arr = res.data;
    });
    axios.get("api/menu/menuList").then(res => {
      this.banner = res.data;
      this.banner.map(i => {
        let pic = i.imgarr
          .split(";")
          .splice(0, 1)
          .join("");

        i.imgarr = pic;
      });
    });
  }
};
</script>

 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang='scss'>
ul li.active {
  font-size: calc(54rem / 67.5);
}
.home {
  overflow: hidden;
  .inp {
    width: 100%;
    height: calc(116rem / 67.5);
    box-sizing: border-box;
    height: calc(156rem / 67.5);
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin: 0 auto;
    .inp-1 {
      width: calc(820rem / 67.5);
      height: calc(93rem / 67.5);
      border: 1px solid #e6dae8;
      border-radius: 15px;
      align-items: center;
      display: flex;
      .img {
        width: calc(43rem / 67.5);
        height: calc(93rem - 43 / 67.5);
        margin-left: 10px;
        img {
          width: calc(43rem / 67.5);
          height: calc(43rem / 67.5);
        }
      }
      input {
        width: calc(815rem - 43 / 67.5);
        height: calc(93rem - 43 / 67.5);
        border: none;
        outline: none;
        font-size: calc(35rem / 67.5);
        text-align: center;
        line-height: calc(93rem - 43 / 67.5);
      }
      ::-webkit-input-placeholder {
        color: #b0b0b0;
      }
    }

    button {
      width: calc(450rem / 67.5);
      height: calc(93rem / 67.5);
      background: none;
      font-size: calc(35rem / 67.5);
      border: none;
      border: 1px solid #e6dae8;
      color: #b0b0b0;
      outline: none;
      border-radius: 15px;
    }
  }
  .chuang {
    width: 100%;
    height: calc(542rem / 67.5);
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.content {
  width: 100%;
  height: calc(500rem / 67.5);
  .s {
    width: 100%;
    height: calc(250rem / 67.5);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    .content-1 {
      width: calc(210rem / 67.5);
      height: calc(190rem / 67.5);
      margin-left: calc(75rem / 67.5);
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      .img {
        width: calc(95rem / 67.5);
        height: calc(95rem / 67.5);
        img {
          width: 100%;
          height: 100%;
        }
      }
      .zi {
        font-size: calc(35rem / 67.5);
      }
    }
  }
  .x {
    width: 100%;
    height: calc(250rem / 67.5);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    .content-1 {
      width: calc(210rem / 67.5);
      height: calc(190rem / 67.5);
      margin-left: calc(75rem / 67.5);
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      .img {
        width: calc(95rem / 67.5);
        height: calc(95rem / 67.5);
        img {
          width: 100%;
          height: 100%;
        }
      }
      .zi {
        font-size: calc(35rem / 67.5);
      }
    }
  }
}
.lb {
  width: 200%;
  height: calc(550rem / 67.5);
  overflow: hidden;
  display: flex;
  .lb-1 {
    width: calc(980rem / 67.5);
    height: calc(550rem / 67.5);
    margin-left: calc(29rem * 2 / 67.5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      width: calc(483rem / 67.5);
      height: calc(483rem / 67.5);
      img {
        width: 100%;
        height: 100%;
      }
    }
    .right {
      width: calc(483rem / 67.5);
      height: calc(483rem / 67.5);
      .r-s {
        width: 100%;
        height: 50%;
        display: flex;
        justify-content: space-between;
        .s-l {
          width: calc(236rem / 67.5);
          height: calc(236rem / 67.5);
          img {
            width: 100%;
            height: 100%;
          }
        }
        .s-r {
          width: calc(236rem / 67.5);
          height: calc(236rem / 67.5);
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .r-x {
        width: 100%;
        height: 50%;
        display: flex;
        justify-content: space-between;
        .s-l {
          width: calc(236rem / 67.5);
          height: calc(236rem / 67.5);
          img {
            width: 100%;
            height: 100%;
          }
        }
        .s-r {
          width: calc(236rem / 67.5);
          height: calc(236rem / 67.5);
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
.list {
  width: 95%;
  height: calc(565rem / 67.5);
  float: right;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #eaeaea;
  .left {
    width: calc(416rem / 67.5);
    height: calc(416rem / 67.5);
    img {
      width: 100%;
      height: 100%;
    }
  }
  .right {
    width: calc(100% - 416 / 67.5);
    height: calc(416rem / 67.5);
    .d {
      width: calc(850rem / 67.5);
      height: calc(90rem / 67.5);
      font-size: calc(57rem / 67.5);
      font-weight: bold;
    }
    .z {
      width: calc(850rem / 67.5);
      height: calc(48rem / 67.5);
      font-size: calc(35rem / 67.5);
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      color: #8f8f8f;
    }
    .x {
      width: calc(850rem / 67.5);
      height: calc(144rem / 67.5);
      display: flex;
      margin-top: calc(100rem / 67.5);
      justify-content: space-between;
      line-height: calc(144rem / 67.5);
      color: #8f8f8f;
      .m {
        font-size: calc(29rem / 67.5);
      }
      .dian {
        height: calc(144rem / 67.5);
        line-height: calc(144rem / 67.5);
        margin-right: 5px;
      }
    }
  }
}
</style>
